<template>
    <div class="app-container h-auto min-h-full">
        <vxe-tip status="primary">
            <p>必填校验 可以直接写在items中 required:ture</p>
        </vxe-tip>
        <vxe-tip status="primary">
            <p>其余校验统一写到rules中（推荐），当然也可以写到items 中的rules</p>
        </vxe-tip>
        <y-form ref="formRef" :options="formOptions">
            <template #input="{ data }">
                <input type="text" v-model="data.name" @input="validateField('formRef', ['name'])">
            </template>
            <template #action>
                <vxe-button type="reset">重置</vxe-button>
                <vxe-button type="submit" status="primary">提交</vxe-button>
            </template>
        </y-form>
    </div>
</template>

<script>
import formMixin from '@/mixins/formMixin';
export default {
    mixins: [formMixin],
    data() {
        return {
            formOptions: {
                titleWidth: 120,
                rules: {
                    pattern: [
                        { required: true, pattern: '^[a-zA-Z]\\w{5,7}$', message: '字母开头5~10位数' }
                    ],
                    arr: [
                        { required: true, type: 'array', message: '至少选一个' }
                    ],
                    mobile: [
                        { required: true, validator: 'MOBILE_NUMBER' }
                    ],
                    email: [
                        { required: true, validator: 'EMAIL_ADDRESS' }
                    ],
                    idCard: [
                        { required: true, validator: 'IDENTITY_CARD' }
                    ],
                    ipAddress: [
                        { required: true, validator: 'IP_ADDRESS' }
                    ],
                    url: [
                        { required: true, validator: 'URL' }
                    ],
                    plateNumber: [
                        { required: true, validator: 'PLATE_NUMBER' }
                    ]
                },
                items: [
                    {
                        span: 24,
                        vertical: true,
                        titleBold: true,
                        title: '基础',
                        children: [
                            { field: 'name', title: '必填', required: true, span: 12, itemRender: { name: 'VxeInput' }, slots: { default: 'input' } },
                            {
                                field: 'age', title: '数字范围', span: 12, itemRender: { name: 'VxeInput', props: { type: 'number' } }, rules: [
                                    { required: true, type: 'number', min: 18, max: 28, message: '数值范围18~28' }
                                ]
                            },
                            { field: 'pattern', title: '正则', span: 12, itemRender: { name: 'VxeInput' } },
                        ]
                    },
                    {
                        span: 24,
                        vertical: true,
                        titleBold: true,
                        title: '预制',
                        children: [
                            { field: 'mobile', title: '手机号', span: 12, itemRender: { name: 'VxeInput' } },
                            { field: 'email', title: '邮箱', span: 12, itemRender: { name: 'VxeInput' } },
                            { field: 'idCard', title: '身份证号码', span: 12, itemRender: { name: 'VxeInput' } },
                            { field: 'ipAddress', title: 'IP 地址', span: 12, itemRender: { name: 'VxeInput' } },
                            { field: 'url', title: 'URL', span: 24, itemRender: { name: 'VxeInput' } },
                            { field: 'plateNumber', title: '车牌号码', span: 12, itemRender: { name: 'VxeInput' } },
                            { align: 'center', span: 24, slots: { default: 'action' } }
                        ]
                    }


                ]
            }
        };
    },
    mounted() {
    }
};
</script>